<template>
  <div>
    <a-row class="header" type="flex" justify="center" >
      <HeaderBg class="header-bg"></HeaderBg>
      <a-col class="title">
        江西省水利厅业务平台
      </a-col>
      <div class="btns">
        <template v-if="isSetting">
          <a-button type="danger" class="btn  mr-md" size="small" @click="setStatus(false);cancelPortalConfig()">
            取消
          </a-button>
          <a-button type="primary" size="small" class="btn  mr-md" @click="savePortalConfig">
            保存
          </a-button>
        </template>
        <template v-else-if="!isSetting">
          <a-button icon="setting" size="small" class="btn portal-btn mr-md" @click="setStatus(true);setMenuId('1')">
            设置
          </a-button>
          <ThemeChange class="mr-md"/>
        </template>
      </div>
      <a-row class="portal-header-menu-contanier" type="flex" justify="space-between" align="middle">
        <a-col :span="12" style="padding-right:188px">
          <a-row type="flex" justify="space-between" align="middle">
            <a-col>
              <a-button size="small" class="portal-btn ml-md px-md">工作台</a-button>
              <!-- <a-dropdown :placement="'bottomLeft'" class="ml-md">
                <a-button size="small" class="portal-btn px-md">工作台</a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.alipay.com/"
                    >1st menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.taobao.com/"
                    >2nd menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.tmall.com/"
                    >3rd menu item</a
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown> -->
            </a-col>
            <a-col>
              <a-dropdown :placement="'bottomLeft'" class="ml-llg">
                <a-button size="small" class="triangle-btn" @click.prevent="handclick">
                  <span class="triangle-btn-text">河湖管理
                    <a-icon type="caret-down" />
                    <span class="triangle-btn-prefix"></span>
                    <span class="triangle-btn-suffix"></span>
                  </span>
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <router-link to="/portal/workplace/1">门户方案1</router-link>
                  </a-menu-item>
                  <a-menu-item>
                    <router-link to="/portal/workplace/2">门户方案2</router-link>
                  </a-menu-item>
                  <a-menu-item>
                    <router-link to="/portal/workplace/3">门户方案3</router-link>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown :placement="'bottomLeft'" class="ml-llg">
                <a-button size="small" class="triangle-btn" @click.prevent="handclick">
                  <span class="triangle-btn-text">工程管理
                    <a-icon type="caret-down" />
                    <span class="triangle-btn-prefix"></span>
                    <span class="triangle-btn-suffix"></span>
                  </span>
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.alipay.com/"
                    >1st menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.taobao.com/"
                    >2nd menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.tmall.com/"
                    >3rd menu item</a
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown :placement="'bottomLeft'" class="ml-llg">
                <a-button size="small" class="triangle-btn" @click.prevent="handclick">
                  <span class="triangle-btn-text">水资源管理
                    <a-icon type="caret-down" />
                    <span class="triangle-btn-prefix"></span>
                    <span class="triangle-btn-suffix"></span>
                  </span>
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.alipay.com/"
                    >1st menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.taobao.com/"
                    >2nd menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.tmall.com/"
                    >3rd menu item</a
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12" style="padding-left:188px">
          <a-row type="flex" justify="space-between" align="middle">
            <a-col>
              <a-dropdown :placement="'bottomLeft'" class=" mr-llg">
                <a-button size="small" class="triangle-btn" @click.prevent="handclick">
                  <span class="triangle-btn-text">应急管理
                    <a-icon type="caret-down" />
                    <span class="triangle-btn-prefix-mirror"></span>
                    <span class="triangle-btn-suffix-mirror"></span>
                  </span>
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.alipay.com/"
                    >1st menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.taobao.com/"
                    >2nd menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.tmall.com/"
                    >3rd menu item</a
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown :placement="'bottomLeft'" class="mr-llg">
                <a-button size="small" class="triangle-btn" @click.prevent="handclick">
                  <span class="triangle-btn-text">工程建设
                    <a-icon type="caret-down" />
                    <span class="triangle-btn-prefix-mirror"></span>
                    <span class="triangle-btn-suffix-mirror"></span>
                  </span>
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.alipay.com/"
                    >1st menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.taobao.com/"
                    >2nd menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.tmall.com/"
                    >3rd menu item</a
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown :placement="'bottomLeft'" class="mr-llg">
                <a-button size="small" class="triangle-btn" @click.prevent="handclick">
                  <span class="triangle-btn-text">水土保持
                    <a-icon type="caret-down" />
                    <span class="triangle-btn-prefix-mirror"></span>
                    <span class="triangle-btn-suffix-mirror"></span>
                  </span>
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.alipay.com/"
                    >1st menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.taobao.com/"
                    >2nd menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.tmall.com/"
                    >3rd menu item</a
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </a-col>
            <a-col>
              <a-dropdown :placement="'bottomLeft'" class=" mr-llg">
                <a-button size="small" class="triangle-btn" @click.prevent="handclick">
                  <span class="triangle-btn-text">更多应用
                    <a-icon type="caret-down" />
                    <span class="triangle-btn-prefix-mirror"></span>
                    <span class="triangle-btn-suffix-mirror"></span>
                  </span>
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.alipay.com/"
                    >1st menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.taobao.com/"
                    >2nd menu item</a
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      href="http://www.tmall.com/"
                    >3rd menu item</a
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-row>
  </div>
</template>

<script>
import HeaderBg from '../../assets/img/bg_portal_header.svg?inline'
import ThemeChange from './ThemeChange.vue'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { PortalEventBus } from './event'
export default {
  name: 'PortalHeader',
  components: {
    HeaderBg,
    ThemeChange
  },
  props: {
    prefixCls: {
      type: String,
      default: 'portal-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: false,
      default: true
    },
    theme: {
      type: String,
      required: false,
      default: 'light'
    }
  },
  data () {
    return {
      showMenu: true,
      visible: false
    }
  },
  computed: {
    ...mapGetters({
      isSetting: 'portalSetStatus',
      userInfo: 'userInfo'
    }),
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    }
  },
  beforeMount () {
  },
  mounted () {
  },
  methods: {
    ...mapMutations({
      setStatus: 'SET_STATUS',
      setMenuId: 'SET_CURRENTMENUID'
    }),
    ...mapActions([
       'GetSourse',
       'Logout'
    ]),
    handclick (e) {
      console.dir(e)
    },
    goAdmin () {
      this.$router.push({ path: '/' })
    },
    savePortalConfig () {
      PortalEventBus.$emit('savePortalConfig')
    },
    cancelPortalConfig () {
      PortalEventBus.$emit('cancelPortalConfig')
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../compact.theme.less";
  .header {
    height: 80px;
    position: relative;
    overflow: hidden;
    .header-bg{
      position: absolute;
      width: 1920px;
      height: 80px;
      top: 0;
      left: 50%;
      margin-left: -960px;
    }
    .title {
      font-size: 28px;
      height: 80px;
      margin-top: -10px;
      font-weight: bold;
      color: @primary-color;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btns {
      right: 0;
      height: 45px;
      position: absolute;
      display: flex;
      align-items: center;
      &.left{
        left: 0;
      }
    }
    .portal-header-menu-contanier{
      position:absolute;
      width: 100%;
      height: 35px;
      bottom: 0;
      .fixed-box{
        width: 375px;
        height: 35px;
      }
    }
  }
</style>
